import React, { useState, useRef, useEffect, memo } from 'react';
import styled from 'styled-components';
import Scroll from '../../components/scroll/index'
import { PropTypes } from 'prop-types';
import style from '../../assets/global-style';

/**
 * 解决滚动问题
better-scroll的(横向)滚动原理:
    首先外面容器要宽度固定，
    其次内容宽度要大于容器宽度。
因此目前存在两个问题:
    外部容器未限定宽度，也就是两个 Horizen 外面包裹的 div 元素。
    内部宽度没有进行相应的计算，始终为屏幕宽度。
 */

const List = styled.div`
  display: flex;
  align-items: center;
  height: 30px;
  overflow: hidden;
  >span:first-of-type {
    display: block;
    flex: 0 0 auto;
    padding: 5px 0;
    margin-right: 5px;
    color: grey;
    font-size: ${style["font-size-m"]};
    /* vertical-align:middle; */
  }
`
const ListItem = styled.span`
    flex: 0 0 auto;
    font-size: ${style["font-size-m"]};
    padding: 5px 8px;
    border-radius: 10px;
    &.selected {
        color: ${style ["theme-color"]};
        border: 1px solid ${style ["theme-color"]};
        opacity: 0.8;
    }
`
function Horizen(props) {
    const Category = useRef(null);
    const { list, oldVal, title } = props;
    const { handleClick } = props;
    // 加入初始化内容宽度的逻辑
    useEffect(() => {
        let categoryDOM = Category.current;
        let tagElems = categoryDOM.querySelectorAll("span");
        let totalWidth = 0;
        Array.from(tagElems).forEach(ele => {
            totalWidth += ele.offsetWidth;
        });
        categoryDOM.style.width = `${totalWidth}px`;
    }, []);

    return (
        <Scroll direction={"horizental"}>
            <div ref={Category}>
                <List >
                    <span>{title}</span>
                    {
                        list.map((item) => {

                            return (
                                <ListItem
                                    key={item.key}
                                    itemKey={item.key}
                                    className={`${oldVal === item.key ? 'selected': ''}`} 
                                    oldVal={oldVal}
                                    onClick={() => handleClick(item.key)} >
                                    {item.name}
                                </ListItem>
                            )
                        })
                    }
                </List>
            </div>
        </Scroll>
    )
}

// 首先考虑接受的参数
//list 为接受的列表数据
//oldVal 为当前的 item 值
//title 为列表左边的标题
//handleClick 为点击不同的 item 执行的方法
Horizen.defaultProps = {
    list: [],
    oldVal: '',
    title: '',
    handleClick: null
};

Horizen.propTypes = {
    list: PropTypes.array,
    oldVal: PropTypes.string,
    title: PropTypes.string,
    handleClick: PropTypes.func
};
export default memo(Horizen);